<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6">
                <el-card class="box-card">
                    <el-tree default-expand-all :data="dataTree" :props="defaultProps" @node-click="handleNodeClick"
                        highlight-current v-loading="loading">
                        <span slot-scope="{ node, data }">
                            <i v-if="data.children" class="el-icon-folder tree_icon"></i>
                            <i v-else class="el-icon-document tree_icon"></i>
                            <span style="margin-left: 10px">{{ node.label }}</span>
                        </span>
                    </el-tree>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card class="box-card">
                    <el-form :inline="true" :model="params" ref="params" class="demo-form-inline sarchForm" size="small"
                        @submit.native.prevent>
                        <el-form-item label="资讯标题">
                            <el-input @keyup.enter.native="handleSubmit" v-model="params.name"
                                placeholder="资讯标题"></el-input>
                        </el-form-item>
                        <el-form-item label="资讯状态">
                            <el-select v-model="params.status" placeholder="资讯状态">
                                <el-option label="待审核" value="3"></el-option>
                                <el-option label="审核通过" value="4"></el-option>
                                <el-option label="审核驳回" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSubmit">查询</el-button>
                            <el-button @click="handleReset">重置</el-button>
                            <!-- <el-button @click="handleAdd('add', cateInfo)" type="primary"
                                icon="el-icon-plus">新增资讯</el-button> -->
                        </el-form-item>
                    </el-form>
                    <!-- <p>已选择栏目：{{cateInfo.cateName}}</p> -->
                    <el-table :data="newData" style="width: 100%" :header-cell-style="{ background: '#f0f2f5' }">
                        <el-table-column label="序号" width="48" type="index"></el-table-column>
                        <el-table-column prop="name" label="资讯标题" show-overflow-tooltip width="150">
                            <template slot-scope="scope">
                                <span @click="handleDetail(scope.row.id)" class="changeColor">{{ scope.row.name
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="releaseUser" label="发布人" show-overflow-tooltip width="150">
                        </el-table-column>
                        <!-- <el-table-column prop="createTime" label="创建时间" width="180">
                        </el-table-column> -->
                        <el-table-column prop="status" label="资讯状态" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status === '0'">草稿</span>
                                <span v-if="scope.row.status === '1'">已发布</span>
                                <span v-if="scope.row.status === '2'">下架</span>
                                <span v-if="scope.row.status === '3'">待审核</span>
                                <span v-if="scope.row.status === '4'">审核通过</span>
                                <span v-if="scope.row.status === '5'">审核驳回</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="columnName" label="所属栏目" width="150" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="170" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="updateTime" label="更新时间" width="170" show-overflow-tooltip>
                        </el-table-column>
                        
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button :disabled="scope.row.status !== '3'" @click="handleApproved(scope.row)"
                                    type="text" size="small">审核通过</el-button>
                                <el-button :disabled="scope.row.status !== '3'" @click="handleReject(scope.row)" type="text"
                                    size="small">驳回</el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="poolPage">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="params.pageNumber" :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 驳回 -->
        <el-dialog title="审核意见" :visible.sync="dialogVisible" width="40%" @close="handleClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-form-item label="审核意见" prop="opinion">
                    <el-input type="textarea" :rows="5" v-model="form.opinion" maxlength="200" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleReturn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getColumnTree2, getNewExamine, getNewOptions, getNewDetail } from "@/request/api/new"
// import NewDialog from "./newDialog.vue"
export default {
    data() {
        return {
            dataTree: [],
            defaultProps: {
                children: "children",
                label: "name",
            },
            selectCate: {
                checkStrictly: true,
                label: "name",
                children: "children",
                value: "id",
                getCheckedNodes: true,
                expandTrigger: "hover",
            },
            isEdit: false,
            loading: true,
            params: {
                page: 1,
                pageSize: 10,
                ntCtgId: null,//栏目id
                name: '',//标题
                status: ''//状态
            },
            newData: [],
            cateInfo: {
                cateId: '',//栏目id
                cateName: ''//栏目名称
            },
            total: 0,
            form: {
                id: '',
                opinion: '',//意见
            },
            rules: {
                opinion: [
                    { required: true, message: '请输入审核意见', trigger: 'blur' },
                ]
            },
            dialogVisible: false
        }
    },
    created() {
        this.getTypeTree()
        this.getNewList()
    },
    methods: {
        // 获取产品类型树
        getTypeTree() {
            getColumnTree2().then(res => {
                if (res.data.code === 200) {
                    this.loading = false
                    this.dataTree = res.data.result
                }
            })
        },
        // 点击左侧树获取信息
        handleNodeClick(data) {
            this.cateInfo.cateId = data.id
            this.cateInfo.cateName = data.name
            this.params.ntCtgId = data.id
            this.getNewList(data.id)
        },
        // 获取新闻列表
        getNewList() {
            getNewExamine(this.params).then(res => {
                if (res.data.code === 200) {
                    this.newData = res.data.result.items
                    this.total = res.data.result.total
                }
            })
        },
        // 编辑
        handleEdit(type, cateInfo, info) {
            this.$refs.newCon.open(type, cateInfo, info)
        },
        handleClose() {
            this.$refs.form.resetFields();

        },
        // 查询
        handleSubmit() {
            this.params.page = 1;
            this.getNewList(this.cateInfo.cateId)
        },
        // 重置
        handleReset() {
            this.params.page = 1
            this.params.name = null
            this.params.status = null
            this.getNewList(this.cateInfo.cateId)
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.page = 1;
            this.getNewList(this.cateInfo.cateId)
        },
        handleCurrentChange(val) {
            this.params.page = val;
            this.getNewList(this.cateInfo.cateId)
        },
        // 审核通过
        handleApproved(info) {
            this.$confirm("确定审核通过吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                getNewDetail(info.id).then(res => {
                    if (res.data.code === 200) {
                        var params = res.data.result
                        params.status = '4'
                        this.getAdd(params)
                    }
                })
            })
        },
        // 驳回
        handleReject(info) {
            this.form.id = info.id
            this.dialogVisible = true
        },
        // 驳回提交申请
        handleReturn() {
            let params = {
                id: this.form.id,
                opinion: this.form.opinion,
                status: '5'
            }
            this.getAdd(params)
        },
        // 修改接口
        getAdd(params) {
            getNewOptions(params).then((res) => {
                if (res.data.code === 200) {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                    this.dialogVisible = false
                    this.getNewList()
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // 查看详情
        handleDetail(id) {
            let url = this.$router.resolve({
                name: "newDetail",
                query: {
                    id,
                    type:'审核'
                    // typeName,
                    // infoTypeId
                },
            });
            window.open(url.href, "_blank");
        }
    }
}
</script>
<style lang="less" scoped>
.el-card {
    overflow-y: auto;
    height: 600px;
}

.bigBtn {
    width: 140px;
}

.tree_icon {
    color: #67C23A;
}

.poolPage {
    margin-top: 15px;
    text-align: right;
}

.changeColor {
    color: #409eff;
    cursor: pointer;
}
</style>

